<template>
   <div class="home">
		<template>
			<el-table  :data="tableData" style="margin-bottom: 100px;" :row-class-name="tableRowClassName" :default-sort = "{prop: 'status', order: 'descending'}">
				<el-table-column prop="setid" label="桌号" width="100" header-align="center"></el-table-column>
				<el-table-column prop="status" label="餐桌状态" header-align="center">
					<template slot-scope="scope" >
						<el-tag v-if="scope.row.status" type="danger">用餐中</el-tag>
						<el-tag v-else type="success">空闲中</el-tag> 
					</template>
				</el-table-column>
				<el-table-column label="开桌时间"  header-align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.settime">{{scope.row.settime}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="￥消费金额"  header-align="center" width="150">
					<template slot-scope="scope">
						<el-tag type="warning" v-if="scope.row.sumprice">￥{{scope.row.sumprice}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作"  header-align="center">
					<template slot-scope="scope">
						<el-button :disabled="!scope.row.status" size="medium" @click="over(scope.row.setid)">结账</el-button>
						<el-button size="medium" :disabled="!scope.row.status" @click="reset(scope.row.setid)">设置该桌为空</el-button>
					</template>
				</el-table-column>
				
			</el-table>
			<template>
				<el-dialog v-for="item of orderlist"  :visible.sync="centerDialogVisible" width="50%" center>
					<div slot="title">
						<span >
							{{item.id}}号订单详情
						</span>
					</div>
					<span>
						<template>
							<el-table :data="foodlist" style="width: 100%">
								<el-table-column prop="foodname" label="菜品" width="180" header-align="center"> </el-table-column>
								<el-table-column label="单价" header-align="center">
									<template slot-scope="scope">
										<span>{{scope.row.price}}/元</span>
									</template>
								</el-table-column>
								<el-table-column label="数量" header-align="center">
									<template slot-scope="scope">
										<span>x{{scope.row.count}}</span>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</span>
					<h3 style="position: absolute;right: 42%; z-index: 10;font-weight: bold;bottom: 53px;">总计：￥{{item.sumprice}}</h3>
					<span slot="footer" class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="sure(item.setid)">确 定</el-button>
					</span>
				</el-dialog>
			</template>
		</template>
    </div>
</template>
<script>

export default {
	data(){
		return{
			tableData:[],
			orderlist:[],
			foodlist:[],
			centerDialogVisible: false,
		}
	},
	methods: {
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} 
			else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		over(setid){
			this.centerDialogVisible= true,
			//获取订单
			this.$axios.get(`${this.$httpurl}/getorder?setid=${setid}`).then((response)=>{
				this.foodlist = JSON.parse(response.data[0].foodlist)
				this.orderlist=response.data
			})
		},
		sure(setid){
			this.centerDialogVisible = false
			//结账
			this.$axios.get(`${this.$httpurl}/payfor?setid=${setid}`).then((response)=>{
				if(response.data =="success"){
					this.$message('订单提交成功！');
				}
			})
		},
		reset(setid){
				this.$confirm('该订单还未结账，是否确认将该订单设置为空 ?  此项操作不可逆！', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					//前置设置为空
					this.$axios.get(`${this.$httpurl}/reset?setid=${setid}`).then((response)=>{
						if(response.data == "success"){
							this.$axios.get(`${this.$httpurl}/getstatus`).then((response)=>{
								this.tableData=response.data
							})
						}
					})
				  this.$message({
					type: 'success',
					message: '该桌状态设置成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '该操作已取消！'
				  });          
				});
			}
		},
	mounted(){
		const update = ()=>{
			this.$axios.get(`${this.$httpurl}/getstatus`).then((response)=>{
				this.tableData=response.data
				//console.log(this.tableData)
			})
		}
		update()
		setInterval(update,3000)
		// setInterval(()=>{
		// 	this.$axios.get(`${this.$httpurl}/getstatus`).then((response)=>{
		// 		this.tableData=response.data
		// 	})
		// },3000)
	}
}
</script>
<style>
	.el-table .warning-row {
	    background: oldlace;
	  }
	 .el-table .success-row {
	    background: #f0f9eb;
	  }
	  .home .el-table td, .el-table th{
		  text-align: center;
	  }
</style>
